<template>
  <public-modal
    width="1000px"
    :title="title"
    modalStyle="SelectUserModal"
    :publicVisible="publicVisible"
    @cancel="cancel"
  >
    <div slot="content">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">用户账号:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.username" placeholder="请输入用户账号" />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button type="primary" @click="searchQuery()" icon="search" class="searchBtn">查询</a-button>
          <a-button type="primary" @click="searchReset()" icon="reload" class="resetBtn">重置</a-button>
          <a-button type="primary" @click="batchDel()" class="BtnStyle" v-show="selectedRowKeys.length !== 0">
            批量删除
          </a-button>
        </div>
      </div>

      <div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="ipagination"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange"
        >
          <template #action="records">
            <span class="operation dropdown-color" @click="showDelete(records)">删除</span>
          </template>
        </a-table>
      </div>
      <allMessage
        ref="allMessage"
        :publicVisible="deleteVisible"
        @cancel="deleteVisible = false"
        @tipMessage="tipMessage"
      ></allMessage>
    </div>
    <div slot="footer"></div>
  </public-modal>
</template>

<script>
import allMessage from '@/components/allMessage'
import publicModal from '@/components/publicModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction, deleteAction } from '@/api/manage'
export default {
  name: 'SelectUserModal',
  mixins: [JeecgListMixin],
  components: { publicModal, allMessage },
  data() {
    return {
      title: '用户',
      publicVisible: false,
      deleteVisible: false,
      loading: false,
      columns: [
        {
          title: '用户账号',
          ellipsis: true,
          align: 'center',
          dataIndex: 'username',
          sorter: true,
        },
        {
          title: '用户名称',
          ellipsis: true,
          align: 'center',
          dataIndex: 'realname',
        },
        {
          title: '所属机关',
          ellipsis: true,
          align: 'center',
          dataIndex: 'unitId_dictText',
        },
        {
          title: '操作',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      roleId: '',
      disableMixinCreated: true,
      url: {
        list: '/sys/user/user_role_page',
        delete: 'sys/user/delete_user_role',
        batchDel: '/sys/user/delete_user_role_batch',
      },
    }
  },
  methods: {
    show(record) {
      this.queryParam.roleId = record.id
      this.publicVisible = true
      this.searchQuery()
    },

    searchReset() {
      if (this.queryParam.roleId) {
        let id = this.queryParam.roleId
        this.queryParam = {}
        this.queryParam.roleId = id
      }
      this.resetTime = true
      this.loadData(1)
    },
    showDelete(records) {
      this.deleteVisible = true
      this.$refs.allMessage.show(records)
    },

    async tipMessage(records) {
      let res = await deleteAction(this.url.delete, { roleId: this.queryParam.roleId, userId: records.id })
      this.$message.success(res.message)
      this.deleteVisible = false
      this.searchQuery()
    },

    async batchDel() {
      let params = {
        userIds: this.selectedRowKeys.join(','),
        roleId: this.queryParam.roleId,
      }
      let res = await deleteAction(this.url.batchDel, params)
      this.$message.success(res.message)
      this.searchQuery()
    },

    cancel() {
      this.queryParam = {}
      this.selectedRowKeys = []
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped></style>
